<template>
	<view class="procedure" :style="{'--color':color}">
		<view :class="{'Active':procedure >= 1 }">
			<view class="Liine">
				<view class="omine">1</view>
				<text class="LiineTxt">详细资料</text>
			</view>
		</view>
		
		<view class="proList" :class="{'Active':procedure >= 2}">
			<view class="henine">
				<text class="heninw">......</text>
			</view>
			<view class="Liine">
				<view class="omine">2</view>
				<text class="LiineTxt">择偶要求</text>
			</view>
			
		</view>
		<view class="proList" :class="{'Active':procedure == 3}">
			<view class="henine">
				<text class="heninw">......</text>
			</view>
			<view class="Liine">
				<view class="omine">3</view>
				<text class="LiineTxt">实名认证</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name:'StepsList',
		props:['procedure'],
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		computed: {
			...mapState(['color', 'title'])
		} 
	}
</script>

<style lang="scss" scoped>
	.procedure{
		width:690rpx;
		height: 200rpx;
		padding:0 30rpx;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.proList{
		flex: 1;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
	}
	.Liine{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.omine{
		width:46rpx;
		height: 46rpx;
		border-radius: 50%;
		background-color: #e5e5e5;
		display: flex;
		justify-content: center;
		align-items: center;
		color:#ffffff;
		font-size:30rpx;
	}
	.LiineTxt{
		color:#999;
		font-size:26rpx;
		margin-top:14rpx;
	}
	.henine{
		flex:1;
		height: 80rpx;
		color:#999;
		position: relative;
	}
	.heninw{
		font-size:50rpx;
		color:#e5e5e5;
		position: absolute;
		top:-30rpx;
		left:50%;
		transform: translate(-50%,0);
	}
	.Active .omine{
		background-color: var(--color);
	}
	.Active .LiineTxt{
		color:var(--color);
	}
	.Active .heninw{
		color:var(--color);
	}
</style>

